<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Gis Api列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="#(ctx)/lambkit/assets/libs/layui/css/layui.css">
		<link rel="stylesheet" href="#(ctx)/lambkit/assets/css/style.css">
	</head>

	<body>
		<div class="lambkit-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">Gis Api列表</div>
						<div class="layui-card-body">
							<!--
							<div class="layui-row">
								<button id="addDataBtn" class="layui-btn" style="float: right;"><i class="layui-icon">&#xe608;</i> 新增</button>
							</div>
							-->
							<table class="layui-hide" id="test" lay-filter="test"></table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="#(ctx)/lambkit/assets/libs/layui/layui.js" charset="utf-8"></script>

		<script>
			layui.use(['layer', 'form', 'table'], function() {
				var table = layui.table;
				var form = layui.form;
				var layer = layui.layer;
				$ = layui.jquery;

				table.render({
					elem: '#test',
					url: '#(ckey)/page?rt=layui',
					toolbar: '#toolbarDemo',
					cellMinWidth: 80,
					page: true,
					cols: [[
						{
							type: 'numbers',
							title:'序号',
							sort: true
						},
						#for(column : mgrdb.fieldList)
						#if(column.fldname=="status")
						{
							field: '#(column.fldname)',
							title: '#(column.fldcnn)',
							templet: '#statusTpl',
							width: 100,
							sort: true
						},
						#elseif(column.iskey !="Y" && column.isview !="N")
						{
							field: '#(column.fldname)',
							title: '#(column.fldcnn)',
							sort: true
						},
						#end
						#end						{
							title:"操作",
							fixed: 'right',
							width: 70,
							align: 'center',
							toolbar: '#barDemo'
						}
					]]
				});

				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象
					if(layEvent === 'detail') { //查看
						showDataForm(data.id);
					}
				});
				
				function showDataForm(id) {
					layer.open({
						type: 2,
						shadeClose: true,
						area: ['80%', '80%'],
						content: 'http://' + location.host + '#(ckey)?id=' + id
					});
				}

			});
		</script>

		#[[
		<script type="text/html" id="statusTpl">
			{{#  if(d.status==0){ }} 禁用
			{{#  } else if(d.status==1){ }} 正常
  			{{#  } else { }}  未激活
  			{{#  } }}
		</script>
		]]#
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		</script>
		
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<!--
					<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="onExport">
    					<i class="layui-icon">&#xe602;</i>
  					</button>
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
				-->
			</div>
		</script>
	</body>

</html>